<template>
  <div>
    <!-- 实训室管理 -->
    <el-container style="background-color: #fff">
      <el-header>
        <div class="box">
          <div class="left">
            <el-input
              v-model="input"
              placeholder="请输入姓名或人员编号"
            ></el-input
            ><el-button
              type="primary"
              style="margin-left: 10px"
              icon="el-icon-search"
              >查询</el-button
            ><el-button icon="el-icon-refresh-right">重置</el-button>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-circle-plus-outline"
              >新建</el-button
            >
          </div>
        </div></el-header
      >
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            'font-weight': '600',
            color: '#666',
            'font-size': '14px',
            'text-align': 'center',
          }"
        >
          >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="实训室名称"
            align="center"
            style="font-weight: 600"
            width="250"
            sortable
          >
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="负责人"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            align="center"
            label="联系电话"
            width="120"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            align="center"
            width="200"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="measure"
            width="120"
            align="center"
            label="面积"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="workstation"
            width="120"
            align="center"
            label="工位数"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="company"
            label="所属单位"
            align="center"
            width="200"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column  align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                icon="el-icon-edit"
                type="primary"
                plain
                >编辑</el-button
              >
              <router-link to="/dashboard/dashboardPie">
              <el-button
                size="mini"
                type="primary"
                plain
                >开放时间</el-button
              >
              </router-link>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="dibu">
          <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">选择全部</el-button>
            <el-button @click="toggleSelection()">反向选择</el-button>
            <el-button @click="toggleSelection()">清除选择</el-button>
            <el-button @click="toggleSelection()">删除选择</el-button>
            <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
            >切换第二、第三行的选中状态</el-button
          > -->
          </div>
            <!-- :current-page.sync="currentPage1" -->

          <el-pagination
            :page-size="100"
            layout="total, prev, pager, next"
            :total="1000"
            style="margin-top: 20px"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
        <!-- 添加或修改用户对话框 -->
    <el-dialog title="编辑实训室" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="基地名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入基地名称" />
        </el-form-item>
        <el-form-item label="负责人" prop="age">
          <el-input v-model="form.age" placeholder="请输入负责人" />
        </el-form-item>

        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="面积" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入面积" />
        </el-form-item>
        <el-form-item label="工位数" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入工位号" />
        </el-form-item>
        <el-form-item label="所属单位" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入所属单位" />
        </el-form-item>
        <el-form-item label="地址" prop="phone">
          <el-input
            type="textarea"
            placeholder="请输入地址"
            v-model="textarea1"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="面向院系" prop="phone">
          <el-input
            type="textarea"
            placeholder="请输入院系"
            v-model="textarea1"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="概述" prop="phone">
          <el-input
            type="textarea"
            placeholder="请输入概述"
            v-model="textarea1"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="操作确认"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>删除操作确认</span>
      <p>确定要删除当前管理员吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ["showFileName"],
  data() {
    return {
      input: "",
      form: {},
      open: false,
      dialogVisible: false,
      // 表单校验
      rules: {},
      textarea1:'',
      tableData: [
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
        {
          date: "合肥学院心理学专业实验实训室",
          name: "王小虎",
          phone: "13531314569",
          address: "合肥学院逸夫楼2层",
          measure: "890",
          workstation: "89",
          company: "合肥学院北基地",
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
    },
    cancel(){

    },
    handleEdit(index, row) {
      console.log(index, row);
      this.open = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    submitForm(){

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style scoped >
.box,
.left {
  display: flex;
  justify-content: space-between;
}
.box {
  margin: 20px 10px;
}
.dibu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>